import React, { Component } from 'react';
import { Modal, Form, Select, Input, Radio } from 'antd';
import PropTypes from 'prop-types';
const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;

class AddModal extends Component{
    layout = {
        labelCol: {
            span: 4
        },
        wrapperCol: {
            span: 20
        }
    }
    constructor(props) {
        super(props);
        this.state = {};
    }

    onOk = () => {
        const { handleOk, form: { getFieldsValue } } = this.props;
        handleOk(getFieldsValue());
    }

    renderDepartment = () => {
        const { departmentData } = this.props;
        return departmentData.map(item => <Option key={item.id} value={item.id}>{item.name}</Option>)
    }
    renderRole = () => {
        const { roleData } = this.props;
        return roleData.map(item => <Option key={item.id} value={item.id} >{item.name}</Option>)
    }

    render() {
        const { visible, form: { getFieldDecorator }, handleCancel } = this.props;
        return (
            <Modal
                onOk={this.onOk}
                onCancel={handleCancel}
                width={500}
                visible={visible}
                title={'添加/修改员工'}
            >
                <Form>
                    <FormItem label={'账号'} {...this.layout}>
                        {
                            getFieldDecorator('userName', {})(
                                <Input placeholder={'请输入账号'} />
                            )
                        }
                    </FormItem>
                    <FormItem label={'姓名'} {...this.layout}>
                        {
                            getFieldDecorator('trueName', {})(
                                <Input placeholder={'请输入姓名'} />
                            )
                        }
                    </FormItem>
                    <FormItem label={'手机号'} {...this.layout}>
                        {
                            getFieldDecorator('phoneNo', {})(
                                <Input placeholder={'请输入手机号'} />
                            )
                        }
                    </FormItem>
                    <FormItem label={'部门'} {...this.layout}>
                        {
                            getFieldDecorator('departmentId', {})(
                                <Select>
                                    {this.renderDepartment()}
                                </Select>
                            )
                        }
                    </FormItem>
                    <FormItem label={'角色'} {...this.layout}>
                        {
                            getFieldDecorator('roleId', {})(
                                <Select>
                                    {this.renderRole()}
                                </Select>
                            )
                        }
                    </FormItem>
                    <FormItem label={'状态'} {...this.layout}>
                        {
                            getFieldDecorator('enabled', {})(
                                <RadioGroup>
                                    <Radio value={1}>正常</Radio>
                                    <Radio value={0}>冻结</Radio>
                                </RadioGroup>
                            )
                        }
                    </FormItem>
                </Form>
            </Modal>
        );
    }
}
AddModal.propTypes = {
    visible: PropTypes.bool,
    handleOk: PropTypes.func,
    handleCancel: PropTypes.func,
    info: PropTypes.object,
    departmentData: PropTypes.array,
    roleData: PropTypes.array
};
AddModal.deafultProps = {
    visible: false,
    handleOk(){},
    handleCancel(){},
    info: {},
    departmentData: [],
    roleData: []
};

export default Form.create({
    mapPropsToFields(props){
        const { info = {} } = props;
        return {
            userName: Form.createFormField({
                value: info['userName'] || ''
            }),
            trueName: Form.createFormField({
                value: info['trueName'] || ''
            }),
            phoneNo: Form.createFormField({
                value: info['phoneNo'] || ''
            }),
            departmentId: Form.createFormField({
                value: info['departmentId'] || ''
            }),
            roleId: Form.createFormField({
                value: info['roleId'] || ''
            }),
            enabled: Form.createFormField({
                value: info['enabled']
            }),
        };
    }
})(AddModal);